<template>
  <form class="use-focus-within" ref="target">
    <input type="text" placeholder="名" /><br/>
    <input type="text" placeholder="姓" /><br/>
    <input type="text" placeholder="电子邮件" /><br/>
    <input type="text" placeholder="密码" /><br/>
    <button type="submit">提交</button>
  </form>
  <p>focus: {{focused}}</p>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useFocusWithin } from "@vueuse/core";

defineOptions({
  name: "UseFocusWithin"
})
const target = ref<HTMLFormElement | null>(null)
const { focused } = useFocusWithin(target)
</script>

<style scoped lang="css">
.use-focus-within {
  background-color: pink;
  padding: 16px;
}
</style>
